<template>
    <div>
        性别:
        <input type="text" v-model="ts.sex">
        姓名:
        <input type="text" v-model="ts.name">
        出生日期:
        <input type="date" v-model="ts.d1">
        -
        <input type="date" v-model="ts.d2">
        <input type="button" value="查询" @click="xx">
        <input type="button" value="重置" @click="xxx">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>性别</td>
                    <td>出生日期</td>
                    <td>年龄</td>
                    <td>爱好</td>
                    <td>简历</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td>{{ a.memberId }}</td>
                    <td>{{ a.name }}</td>
                    <td>{{ a.sex }}</td>
                    <td>{{ moment(a.dates).format("YYYY-MM-DD") }}</td>
                    <td>{{ a.age }}</td>
                    <td>{{ a.aihao }}</td>
                    <td>{{ a.jian }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,onMounted } from 'vue';
onMounted(()=>{
    show()
})
const xx=()=>{
    show()
}
const xxx=()=>{
    ts.value={
        d1:null,
        d2:null,
        name:'',
        sex:''
    }
    show()
}
const ts=ref({
    d1:null,
    d2:null,
    name:'',
    sex:''
})
const show=()=>{
    axios.get("https://localhost:7253/api/Member/ShowMember",{params:ts.value}).then(res=>{
        date.value=res.data
    })
}
const date=ref([{
    "memberId": 0,
    "name": "",
    "sex": "",
    "dates": "",
    "age": "",
    "aihao": "",
    "jian": ""
}])
</script>

<style scoped>

</style>